import { ref, watchEffect } from 'vue';

export const useHandlePage = (props, emit) => {
  let paginationInfo = ref({
    current: 1,
    total: 0,
    pageSize: 10,
    pageSizeOpts: [10, 20, 50, 100],
    showElevator: true,
    showSizer: true,
    showTotal: true,
  });

  watchEffect(() => {
    paginationInfo.value = { ...paginationInfo.value, ...props.pagination };
  });

  /**
   * @description 分页切换
   * @param {Number} 当前页
   * @return {Function} pageChange
   */
  const handleOnChange = current => {
    paginationInfo.value.current = current;
    emit('page-change', paginationInfo.value);
  };

  /**
   * @description 页数大小切换
   * @param {Number} 分页大小
   */
  const handleOnSizeChange = pageSize => {
    paginationInfo.value.pageSize = pageSize;
    // 分页大小独立回调
    emit('page-size-change', paginationInfo.value);
    // 分页大小与切换分页公用回调
    emit('page-change', paginationInfo.value);
  };

  /**
   * @description 重置分页数据
   */
  const resetPage = () => {
    paginationInfo.value.current = 1;
    paginationInfo.value.total = 0;
    props.pagination.current = 1;
    props.pagination.total = 0;
  };

  return {
    handleOnChange,
    handleOnSizeChange,
    paginationInfo,
    resetPage,
  };
};
